<template>
	<div id="Publish">
		<x-header :left-options="{showBack: false}" title="发布帖子" class="header vux-1px-b">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			<!--<a slot="right">存草稿</a>-->
		</x-header>
		<div class="content-wrap">
			<textarea v-model="thread_content" name="" rows="10" cols="50" placeholder="详细说说你的宝贝吧..."></textarea>
			<div class="coordinate">
				<div class="location" @click="getWXLocation">
					<i class="publish-add tribune-publish-add"></i>
					<span v-model="locations">{{locations}}</span>
				</div>
				<!--<div class="smile">
					<i class="publish-expression tribune-publish-expression"></i>
				</div>-->
			</div>
			<div class="img-list" id="imgList">
				<div id="photos"></div>
				<div class="last">
					<input id="file" type="file" class="fileprew" accept="image/*" multiple="multiple" />
				</div>
			</div>
		</div>
		<div class="add-link" @click="showToast= true">
			<i class="tribune-icon tribune-link"></i>
			<span v-model="link_name">{{link_name}}</span>
			<i class="arrow-down tribune-arrow-right"></i>
		</div>
		<button @click="addThread">发布</button>
		<x-dialog v-model="showToast" class="dialog-demo link-wrap" hide-on-blur>
			<h2>添加链接</h2>
			<div class="input-wrap">
				<input v-model="link_text" type="text" placeholder="输入链接名称" />
				<input v-model="link_href" type="text" placeholder="输入链接地址" />
			</div>
			<div class="button vux-1px-t">
				<span @click="canceLink" class="vux-1px-r">取消</span>
				<span @click="confirmLink" class="confirm">确定</span>
			</div>
		</x-dialog>
		<popup v-model="addressAlert" position="bottom" class="check-wrap">
			<ul>
				<li class="vux-1px-b" v-for="(item,index) in addressList" @click="change(index,item)">
					<h2>{{item.name}}</h2>
					<p>{{item.address}}</p>
				</li>
			</ul>
		</popup>
		<loading :show="show" text="上传中"></loading>
		<toast v-model="success" type="text" width="3.5rem">{{msg}}</toast>
	</div>
</template>

<script>
	import { XHeader, Loading, Toast, XDialog, Popup, Group, Cell } from 'vux'
	import wx from 'weixin-js-sdk';
	import $ from 'jquery'
	import 'lrz/dist/lrz.all.bundle'
	export default {
		data() {
			return {
				locations: '你在哪里？',
				detail_location: '',
				location_detail: '',
				addressList: [],
				locationUrl: '',
				thread_content: '',
				showToast: false,
				addressAlert: false,
				show: false,
				success: false,
				msg: '',
				board_name: '测试板块',
				link_href: '',
				link_text: '',
				link_name: '添加链接'
			}
		},
		components: {
			XHeader,
			Loading,
			Toast,
			XDialog,
			Popup,
			Group,
			Cell
		},
		mounted() {
			this.uploadImage();
		},
		methods: {
			change: function(index, item) {
				//				alert(JSON.stringify(item));
				this.addressAlert = !this.addressAlert;
				this.locations = item.name;
				this.detail_location = item.address;
			},
			//将帖子发送给后台
			addThread: function() {
				var thread_title = this.thread_content.substring(0, this.thread_content.indexOf(','));
				var val = new Array;
				var _this = this;
				$('#imgList .item input').each(function(index, item) {
					val[index] = $(this).val();
				})
				var params = {
					thread_title: thread_title,
					thread_content: this.thread_content.replace(/\n|\r\n/g, "<br>"),
					thread_imgs: val,
					board_name: this.board_name,
					thread_geo: this.location_detail,
					thread_link: {
						text: this.link_text,
						href: this.link_href
					},
					thread_nearpois: {
						name: this.locations,
						address: this.detail_location
					}
				}
				if(this.thread_content == '') {
					this.success = !this.success;
					this.msg = '请输入您的描述'
				} else if(val == '') {
					this.success = !this.success;
					this.msg = '请上传图片'
				} else {
					this.show = true;
					this.$http({
						method: 'POST',
						url: '/los/api/forum/thread_add.json',
						data: params
					}).then((result) => {
						if(result.data.code == 1) {
							this.show = false;
							location.href = '#/tribune/HotList'
						} else {
							this.show = false;
						}
					}).catch((err) => {

					})
				}

			},
			canceLink: function() {
				this.showToast = !this.showToast
				this.link_href = '';
				this.link_text = '';
			},
			confirmLink: function() {
				if(this.link_text == '') {
					this.success = !this.success;
					this.msg = '请输入链接名称'
				} else if(this.link_href == '') {
					this.success = !this.success;
					this.msg = '请输入链接地址'
				} else if(this.link_href.indexOf('http://pm.haowenwan.com') != 0) {
					this.success = !this.success;
					this.msg = '只能输入本网站链接'
				} else {
					this.showToast = !this.showToast;
					this.link_name = this.link_text;
					$('.add-link').find('span').css('color', '#4F98EA')
				}
			},

			//上传图片
			uploadImage: function() {
				let _this = this;
				document.querySelector('#file').addEventListener('change', function() {
					let _that = this;
					let view = $('#photos');
					//限制图片上传张数
					let imgcount = 7;
					for(let i = 0; i < _that.files.length; i++) {
						_this.show = true;
						lrz(_that.files[i]).then(function(rst) {
							//是否可继续添加
							let status = true;
							if(view.find('img').length == imgcount) {
								status = false;
								_this.success = !_this.success;
								_this.msg = '最多上传8张图片';
								$('.last').hide();
							}
							if(status) {
								let str = '<div class="item">' +
									'<img src ="' + rst.base64 + '"/>' +
									'<a href="javascript:;" class="del">删除</a>' +
									'<input type="hidden" id="images" name="images[]" value="' + rst.base64 + '"/>'; +
								'</div>';
								view.append(str);
								if(i == _that.files.length - 1) {
									// 处理成功会执行
									_this.show = false;
								}
								//点击删除
								$(".del").on("click", function() {
									$(this).parent().remove();
									$(".last").show();
								});
							}
							//ajax上传
						}).catch(function(err) {
							// 处理失败会执行
						})
					}
				});
			},

			//获取地址信息
			getWXLocation: function() {
				let _this = this;
				let urls = window.location.href;
				var ua = navigator.userAgent.toLowerCase();
				if(/iphone|ipad|ipod/.test(ua)) {
					if(urls.indexOf("?") != -1) {
						this.locationUrl = window.location.href;
					} else {
						this.locationUrl = 'http://pm.haowenwan.com/dist/#/';
					}
				} else if(/android/.test(ua)) {
					this.locationUrl = urls;
				}
				var params = {
					url: this.locationUrl,
				}
				this.$http({
					method: 'POST',
					url: '/los/api/oauth/script',
					data: params,
				}).then((result) => {
					if(result) {
						wx.config({
							debug: true,
							appId: result.data.appId,
							timestamp: result.data.timestamp,
							nonceStr: result.data.nonceStr,
							signature: result.data.signature,
							jsApiList: result.data.jsApiList,
						});
						wx.ready(function() {
							wx.getLocation({
								type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
								success: function(res) {
									let geocoder = new qq.maps.Geocoder({
										complete: function(result) {
											_this.addressList = result.detail.nearPois;
											_this.location_detail = result;
											_this.addressAlert = true;
										}
									})
									var coord = new qq.maps.LatLng(res.latitude, res.longitude);
									geocoder.getAddress(coord);
								},
								cancel: function(res) {

								}
							});

						})
						wx.error(function(res) {});
					} else {
						alert('获取信息失败 请重新尝试');
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			back: function() {
				window.history.go(-1);
			},
		}
	}
</script>

<style scoped="scoped">
	.header {
		background: #fff;
	}
	
	.content-wrap {
		background: #fff;
		padding: 0.26rem;
	}
	
	textarea {
		height: 4.74rem;
		width: 100%;
		font-size: 0.37rem;
		resize: none;
	}
	
	.coordinate {
		overflow: hidden;
		padding-bottom: 0.26rem;
		border-bottom: dashed 1px #ccc;
	}
	
	.coordinate .location {
		float: left;
		height: 0.58rem;
		border: solid 1px #ccc;
		border-radius: 0.29rem;
		display: flex;
		align-items: center;
		padding: 0.1rem 0.32rem;
	}
	
	.coordinate .location span {
		margin-left: 0.13rem;
		font-size: 0.32rem;
		color: #999;
	}
	
	.coordinate .smile {
		margin-left: 0.48rem;
		float: left;
	}
	
	.add-link {
		height: 1.3rem;
		line-height: 1.3rem;
		margin-top: 0.26rem;
		background: #fff;
		padding: 0 0.26rem;
		display: flex;
		align-items: center;
		position: relative;
	}
	
	.add-link span {
		margin-left: 0.26rem;
		font-size: 0.4rem;
		color: #222;
	}
	
	.add-link .arrow-down {
		position: absolute;
		right: 0.26rem;
	}
	
	button {
		width: 100%;
		background: #a30000;
		height: 1.3rem;
		color: #fff;
		font-size: 0.45rem;
		border: none;
		margin-top: 4.5rem;
	}
	
	.link-wrap h2 {
		width: 100%;
		height: 1.3rem;
		line-height: 1.3rem;
		text-align: center;
		font-size: 0.45rem;
		color: #222;
		border-radius: 0.13rem;
	}
	
	.link-wrap .input-wrap {
		padding: 0 0.53rem;
		margin-bottom: 0.53rem;
	}
	
	.link-wrap .input-wrap input {
		background: #eee;
		width: 100%;
		/*height: 1.17rem;*/
		padding: 0.5rem 0 0.5rem 0.26rem;
		border-radius: 0;
		font-size: 0.37rem;
	}
	
	.link-wrap .button {
		height: 1.3rem;
		line-height: 1.3rem;
		display: flex;
	}
	
	.link-wrap .button span {
		flex: 1;
		font-size: 0.45rem;
		color: #666;
	}
	
	.link-wrap .button .confirm {
		color: #222;
	}
	
	.check-wrap {
		background: #fff;
		padding: 0 0.26rem;
	}
	
	.check-wrap ul li {
		height: 1.4rem;
		padding: 0.13rem 0;
	}
	
	.check-wrap ul li p {
		color: #777;
		margin-top: 0.13rem;
	}
</style>
<style>
	.link-wrap .weui-dialog {
		width: 85%;
		margin: 0 auto;
		max-width: 8.53rem;
	}
	
	#Publish .img-list {
		overflow: hidden;
		padding: 0.4rem 0;
	}
	
	#Publish .img-list .item {
		position: relative;
		float: left;
		width: 1.8rem;
		height: 1.8rem;
		margin-right: 0.06rem;
		margin-bottom: 0.06rem;
	}
	
	#Publish .img-list .item .add {
		display: none;
	}
	
	#Publish .img-list .item:first-child .add {
		display: block;
		width: 100%;
		height: 0.61rem;
		line-height: 0.61rem;
		position: absolute;
		color: #fff;
		font-size: 0.32rem;
		text-align: center;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
	}
	
	#Publish .img-list .item:nth-child(5n) {
		margin-right: 0;
	}
	
	#Publish .img-list .item img {
		width: 1.8rem;
		height: 1.8rem;
		border-radius: 0.1rem;
	}
	
	#Publish .img-list .item .del {
		position: absolute;
		right: 0;
		top: 0;
		width: 0.58666rem;
		height: 0.58666rem;
		font-size: 0;
		background: url(../assets/images/home/icon_del.png) center center no-repeat;
		background-size: 100%;
	}
	
	#Publish .img-list .last {
		text-align: center;
		font-size: 0.34666rem;
		color: #aaa;
		border: dashed 1px #e6e6e6;
		position: relative;
		float: left;
		width: 2.18rem;
		height: 2.18rem;
		border-radius: 0.1rem;
	}
	
	#Publish .img-list .last {
		text-align: center;
		width: 1.8rem;
		height: 1.8rem;
		position: relative;
	}
	
	#Publish .img-list .last:before {
		content: '';
		position: absolute;
		top: 0.8rem;
		left: 0.6rem;
		width: 0.6rem;
		height: 0.05rem;
		background-color: #aaa;
	}
	
	#Publish .img-list .last:after {
		content: '';
		position: absolute;
		top: 0.52rem;
		width: 0.05rem;
		height: 0.6rem;
		background-color: #aaa;
	}
	
	#Publish .img-list .last .fileprew {
		position: absolute;
		top: 0;
		left: 0;
		width: 1.8rem;
		height: 1.8rem;
		font-size: 1.33333rem;
		opacity: 0;
		/* 实现的关键点 */
		filter: alpha(opacity=0);
		/* 兼容IE */
	}
</style>